import { useState } from 'react';
import { View } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'

const TopTabs = () => {
    const [current, setCurrent] = useState(0)
    return (
        <AtTabs
            current={current}
            scroll
            tabList={[
                { title: '原神' },
                { title: '大别野' },
                { title: '崩坏3' },
                { title: '未定事件簿' },
                { title: '崩坏学园2' },
                { title: '星穹铁道' }
            ]}
            onClick={setCurrent}>
            <AtTabsPane current={current} index={0}>
                <View style='font-size:18px;text-align:center;height:100px;'>标签页一的内容</View>
            </AtTabsPane>
            <AtTabsPane current={current} index={1}>
                <View style='font-size:18px;text-align:center;height:100px;'>标签页二的内容</View>
            </AtTabsPane>
            <AtTabsPane current={current} index={2}>
                <View style='font-size:18px;text-align:center;height:100px;'>标签页三的内容</View>
            </AtTabsPane>
            <AtTabsPane current={current} index={3}>
                <View style='font-size:18px;text-align:center;height:100px;'>标签页四的内容</View>
            </AtTabsPane>
            <AtTabsPane current={current} index={4}>
                <View style='font-size:18px;text-align:center;height:100px;'>标签页五的内容</View>
            </AtTabsPane>
            <AtTabsPane current={current} index={5}>
                <View style='font-size:18px;text-align:center;height:100px;'>标签页六的内容</View>
            </AtTabsPane>
        </AtTabs>
    )
};

export default TopTabs;